<template>
  <div>
    <div class="computertitle">
      <div class="computername">
        {{ surveyName }}
      </div>
      <div class="computertext">
        {{ surveyDescription }}
      </div>
    </div>
    <!-- 试题 -->
    <div class="computerquestions">
      <div v-for="(item, index) in answerList" :key="index">
        <div
          :class="item.requiredFlag == 1 ? 'required itemtitle' : 'itemtitle'"
        >
          <span>{{ index + 1 }}、</span>
          <!-- <span v-if="item.type != 3">{{ item.title }}?</span> -->
          <span v-if="item.questionType !== 3" v-html="item.questionName" style="display: flex"></span>
          <!-- 填空题 -->
          <div v-if="item.questionType == 3">
            <div v-for="(o,i) of item.questionNameList" :key="i" style="display:flex;">
              <span v-html="o.name"></span>
              <el-input v-model="o.value" placeholder="请输入内容" style="width: 150px;margin-left: 5px;"
                        v-if="index!=item.questionNameList.length-1"
              ></el-input>
            </div>
            <!-- <span  v-for="(o,i) of item.questionNameList" :key="i">{{ o.name }}<el-input v-model="o.value" placeholder="请输入内容" style="width: 150px;margin-left: 5px;"></el-input></span> -->
          </div>
          <span class="tips">【{{ typeList[item.questionType - 1] }}】</span>
          <span class="right" v-if="item.questionDescription">
              <el-tooltip
                effect="dark"
                :content="item.questionDescription"
                placement="top-start"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
        </div>
        <!-- 单选选择题 -->
        <div v-if="item.questionType == 1">
          <el-radio-group v-removeAriaHidden v-model="item.optionId">
            <div
              v-for="(e, index) in item.optionList"
              :key="index"
              class="flleft"
            >
              <el-radio :label="e.id" :key="e.id">{{
                  e.optionName
                }}
              </el-radio>
              <div
                :class="e.requiredFlag ? 'required fl' : 'fl'"
                v-if="e.fillFlag == 1"
              >
                <el-input v-model="item.answerContent" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </el-radio-group>
        </div>
        <!-- 多选选择题 -->
        <div v-if="item.questionType == 2">
          <el-checkbox-group v-model="item.optionId">
            <div
              class="flleft"
              v-for="(e, index) in item.optionList"
              :key="index"
            >
              <el-checkbox :label="e.id">{{ e.optionName }}</el-checkbox>
              <div
                :class="e.requiredFlag ? 'required fl mr' : 'fl mr'"
                v-if="e.fillFlag == 1"
              >
                <el-input v-model="item.answerContent" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </el-checkbox-group>
        </div>
        <!-- 简答题 -->
        <div v-if="item.questionType == 4">
          <textarea v-model="item.answerContent" cols="60" rows="5"></textarea>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
import { Questionmsg } from '@/api/questions/updatequestion'
import { isEmpty } from '@/utils/publicFun'

export default {
  name: 'MixedStateAdminAnswer',

  data() {
    return {
      id: '',
      surveyName: '',
      surveyDescription: '',
      answerList: [],
      typeList: ['单选题', '多选题', '填空题', '简答题'],
      optionId: [],
      optionId1: []
    }
  },
  created() {
    this.id = this.$route.query.id
    // 调用获取问卷方法
    this.getSurvey()
  },
  mounted() {
  },

  methods: {
    // 获取问卷
    async getSurvey() {
      let res = await Questionmsg({ surveyId: this.id })
      console.log(res, '6666666')
      // res.data.questionList.forEach((e) => {
      //   e.questionName = e.questionName.replace(/_______/g, "");
      // });
      this.surveyName = res.data.surveyName
      this.surveyDescription = res.data.surveyDescription
      this.answerList = res.data.questionList.map(i => {
        if (i.questionType == 3) {
          i.questionNameList = i.questionName.split('_______').map(i => ({ name: i, value: '' }))
        }
        return {
          questionId: i.id,
          optionId: [],
          ...i
        }
      })
    },
    requiredRules() {
      let status = false
      outerloop: for (let index = 0; index < this.answerList.length; index++) {
        let item = this.answerList[index]
        if (item.questionType == 1 && item.requiredFlag == 0) {
          // 单选必填
          if (isEmpty(item.optionId)) {
            this.$message.error(`请回答第${index + 1}题`)
            status = true
            break
          } else {
            // 单选必填并且选择了需要填空的选项
            for (let s = 0; s < item.optionList.length; s++) {
              let o = item.optionList[s]
              if (o.fillFlag == 1 && o.requiredFlag && o.id == item.optionId && isEmpty(item.answerContent)) {
                this.$message.error(`请填写第${index + 1}题中的选项填空`)
                status = true
                break outerloop
              }
            }
          }
        } else if (item.questionType == 2 && item.requiredFlag == 0) {
          // 多选题必填
          if (isEmpty(item.optionId)) {
            this.$message.error(`请回答第${index + 1}题`)
            status = true
            break
          } else {
            // 多选必填并且选择了需要填空的选项
            for (let s = 0; s < item.optionList.length; s++) {
              let o = item.optionList[s]
              if (o.fillFlag == 1 && o.requiredFlag && item.optionId.includes(o.id) && isEmpty(item.answerContent)) {
                this.$message.error(`请填写第${index + 1}题中的选项填空`)
                status = true
                break outerloop
              }
            }
          }
        } else if (item.questionType == 3 && item.requiredFlag == 0 && item.questionNameList.find(i => isEmpty(i.value))) {
          // 填空题
          this.$message.error(`请回答第${index + 1}题`)
          status = true
          break
        } else if (item.questionType == 4 && item.requiredFlag == 0 && isEmpty(item.answerContent)) {
          // 简答题
          this.$message.error(`请回答第${index + 1}题`)
          status = true
          break
        } else {
          status = false
        }
      }
      return status
    },
    submit() {
      if (this.requiredRules()) {
        return
      }
      this.answerList.forEach(i => {
        if (i.questionType == 3) {
          i.answerContent = i.questionNameList.map(i => i.value)
        }
        if (i.questionType == 2) {
          i.optionId
        }
      })

      console.log(this.answerList, '????????????????????????')
    }
  }
}
</script>

<style lang="scss" scoped>
.questiontitle {
  border-bottom: 1px dotted #ddd;
  margin: auto;

  .questionname {
    width: 198px;
    text-align: center;
    margin: 30px auto auto;
    color: rgba(39, 196, 120, 1);
    font-size: 18px;
    line-height: 25px;
  }

  .questiontext {
    width: 347px;
    text-align: center;
    margin: 30px auto 20px;
    font-size: 16px;
    line-height: 25px;
  }
}

.computername {
  width: 500px;
  text-align: center;
  margin: 30px auto auto;
  color: rgba(39, 196, 120, 1);
  font-size: 18px;
  line-height: 28px;
}

.computertext {
  width: 100%;
  text-align: center;
  margin: 30px auto;
  font-size: 16px;
  line-height: 25px;
}

.questions {
  width: 449px;
  margin: 10px auto auto;
}

.computerquestions {
  padding: 30px 60px;
  width: 100%;
  margin: 10px auto auto;
}

.computerquestions > div {
  margin-bottom: 30px;
}

.itemtitle {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.computertitle {
  border-bottom: 1px dotted #ddd;
}

.questions > div {
  margin-bottom: 15px;
  border-bottom: 1px dotted #ddd;
}

.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.flleft {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px;
  font-size: 20px;
}

.fl {
  display: flex;

  align-items: center;

  justify-content: flex-start;
}

.mr {
  margin-left: 20px;
}
</style>
